function Tab (el) {
    this.el = document.querySelector(el)  //this.el 为获取各个实例化对象的最大盒模型
    //套娃入口
    this.init()
}

Tab.prototype.init = function () {
    this.titleOver()  //此处this指向 实例化对象 tab1 tab2
}

Tab.prototype.titleOver = function () {  //事件函数、原型方法、构造函数 不用箭头函数
    //获取li标签对象
    let ulLiObjs = this.el.querySelectorAll('ul li')  //此处this指向 实例化对象 tab1 tab2 
    //遍历
    ulLiObjs.forEach((item,i) => {
        // //加鼠标移入事件
        item.onmouseover = () => {
            this.ulChange(item)
            this.olChange(i)
        }
    })
}

Tab.prototype.ulChange = function (item) {
    //处理函数 - 清除类名active
    this.el.querySelector('ul li.active').className = ''  //此处this指向 实例化对象 tab1 tab2
    //处理函数 - 给当前移入li标签对象添加类名active
    item.className = 'active'
}

Tab.prototype.olChange = function (i) {
    //处理函数 - 同步 ol 标签内容
    //处理函数 - 清除 ol 类名active
    this.el.querySelector('ol li.active').className = ''
    //处理函数 - 给当前移入的li标签对象添加类名active
    this.el.querySelectorAll('ol li')[i].className = 'active'
}